<template>
  <!-- 抄送人配置 -->
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本设置" name="base">
        <div>
          <div>
            <div class="title">请选择该节点的审批人</div>
            <div>
              <el-radio-group v-model="props.config.handlerScope" @change="changeHandlerScope">
                <el-radio :label="1">指定人员</el-radio>
                <el-radio :label="2">部门主管</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div v-if="props.config.handlerScope === 1">
            <div class="title">指定成员</div>
            <div>
              <OrgSelectView v-model="props.config.handlers" :enableRole="true"/>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="表单操作权限" name="permissions">
        <Permissions :config="props.config" :node-type="NOTIFY"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="NotifyDrawer">
import Permissions from "../../components/Permissions";
import {getCurrentInstance, inject, onMounted, ref} from "vue";
import {KEY_PROCESS_DATA} from "../../config/keys";
import OrgSelectView from "@/components/OrgSelect/OrgSelectView.vue";
import {NOTIFY} from "@/components/EasyProcess/config/nodeType";

const props = defineProps({
  config: { // 传入的流程配置数据
    type: Object,
    default: {}
  }
});

const { proxy } = getCurrentInstance();
const activeName = ref('base')

// 获取流程数据
const processData = inject(KEY_PROCESS_DATA)
onMounted(async () => {
  init()
});

function init() {
  if (!props.config.handlerScope) {
    props.config.handlerScope = 1
  }
  if (!props.config.handlers) {
    props.config.handlers = []
  }
}

function changeHandlerScope() {
  props.config.handlers = []
}
</script>

<style lang="less" scoped>
.title {
  margin: 10px 0;
  font-weight: bold;
  font-size: 14px;
}
.self-selection-scope {
  margin-top: 10px;
}
.select-max-width {
  width: 100%;
}
</style>
